<template>
  <view class="my-shop">
    <LocationCalendar :shopImg="shopInfo.head_imgs" page="search" @search="search"/>
    <view class="content">
      <!-- 店铺信息 -->
			<ShopInfo :shop="shopInfo" :isMobile="true" @shopEva="switchTap('3')" />
      <!-- switch bar -->
      <view class="switch-bar" :style="{top:top}">
        <view class="switch-item" @tap="switchTap('1')" :class="switchValue=='1'?'a-switch-item':''"> 店铺产品 </view>
        <view class="switch-item" @tap="switchTap('2')" :class="switchValue=='2'?'a-switch-item':''"> 商家信息 </view>
        <view class="switch-item" @tap="switchTap('3')" :class="switchValue=='3'?'a-switch-item':''"> 用户评价 </view>
      </view>
      <!-- 店铺产品 -->
      <view class="shop-product" v-if="switchValue == '1'">
        <scroll-view scroll-y="true" class="tab-bar" :style="{maxHeight:h}">
          <view 
						class="tab-item" 
						:class="item.id == categoryId?' a-tab-item':''" 
						v-for="(item, index) in categoryList" 
						:key="item"
						@tap="tapCategory(item.id)"
					>
						{{item.title}}
					</view>
        </scroll-view>
        <scroll-view scroll-y="true" class="sc-view-right" :style="{maxHeight:h}" @scrolltolower="scrolltolower">
					<view class="goods-list" v-if="goodsList.length">
						<view class="goods-item" v-for="item in goodsList" :key="item">
							<image :src="item.img" class="goods-img" />
							<view class="goods-info">
								<view class="goods-name" :style="{width:goodsWidth}"> {{item.name}} </view>
								<view class="goods-desc" :style="{width:goodsWidth}"> {{item.msg}} </view>
								<view class="goods-price">
									<view class="price"> ￥<text>{{item.price}}</text> </view>
									<view class="price-old"> 原价：￥999 </view>
								</view>
								<view class="goods-sale"> 销量：100 </view>
							</view>
						</view>
					</view>
					<Empty v-else/>
        </scroll-view>
      </view>
      <!-- 商家信息 -->
      <view class="shop-details" v-if="switchValue == '2'">
        <view class="item">
          <view class="label"> 营业时间 </view>
          <view class="value"> {{shopInfo.open_time}}至{{shopInfo.over_time}}</view>
        </view>
        <view class="item">
          <view class="label"> 联系电话 </view>
          <view class="value"> {{shopInfo.help_mobile}}</view>
        </view>
        <view class="item">
          <view class="label"> 商家地址 </view>
          <view class="value"> 
            {{shopInfo.detail_address}}
            <image src="/static/icon/shop/nav.png" class="v-img"/>
          </view>
        </view>
        <view class="item">
          <view class="label"> 商家简介 </view>
          <view class="value"> {{ shopInfo.intro }}</view>
        </view>
      </view>
      <!-- 用户评价 -->
      <Evaluate :isTab="false" :isTitle="false" :evaList="evaList" v-if="switchValue == '3'"/>
    </view>
  </view>
</template>

<script setup>
  import { computed, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
  import LocationCalendar from '@/components/LocationCalendar.vue'
  import GoodsCard from '@/components/GoodsCard.vue';
  import Evaluate from '@/components/Evaluate.vue';
  import GoodsArguments from '@/components/GoodsArguments.vue';
	import ShopInfo from './components/ShopInfo.vue';
	import Empty from '@/components/Empty.vue';
	import { useAddressStore, useUserStore } from '@/store/index.js'
	import { GetShopDetailsApi, GetShopCategoryApi, GetShopGoodsListApi, GetShopEvaluateListApi } from '@/service/index.js'
  const { safeArea } = uni.getSystemInfoSync()
	const goodsWidth = computed(() => {
	  return safeArea.width - 196 + 'px'
	})
  const switchValue = ref('1')
  const h = computed(() => {
    return (safeArea.height - 100 - safeArea.top) + 'px'
  })
  const top = computed(() => safeArea.top + 'px')
	const shopID = ref() // 店铺ID
	const shopInfo = ref({
		open_time: '', // 营业时间
		over_time: '', // 结束时间
		open_status: '',// 营业状态==1营业中 ==2 休息中
		is_collect: 0, // ==1 已收藏 ==0未收藏
		comment_score: '', // 评分
		name: '', // 
		contacts: '',// 联系人名字
		mobile: '', 
		help_mobile: '', // 客服电话 (展示给客户的)
		describe_text: '', // 店铺描述
		intro: '', // 店铺简介 (展示给客户的)
		detail_address: '',
		logo: '',
		head_imgs: [], // 商家门店照片 (展示给客户的)
		type: '', // 	1 个人 2公司
		comment_num: '', //评价数量
		goods_sales: '', // 销量
		distance: '', // 距离 米
		head_imgs: '', // 商家门店照片 (展示给客户的)
		bgc: '', // 自己转换的商家背景图
 	})
  const page = ref(1)
	const total = ref(0)
	const goodsList = ref([]) // { restrict_num: '', // 限购数量 num: 0, // 自己定义的加入购物车数量 }
  const evaList = ref([])
	const categoryId = ref('0') // 分类id
	const categoryList = ref([{id:'0', title: '全部商品'}]) // 分类列表
  const searchVal = ref('')
  const search = (val) => {
    searchVal.value = val
    page.value = 1
    categoryId.value = 0
    goodsList.value = []
    getGoodsList()
  }
	// 点击切换商家产品/商家信息/评价
  const switchTap = (index) => {
    if(switchValue.value == index) return
    switchValue.value = index
    if(index == 3) getShopEvaList()
  }
  // 获取商家评价列表
  const getShopEvaList = () => {
    GetShopEvaluateListApi({shop_id: shopID.value}).then(res => {
      evaList.value = res.data
    })
  }
	//  获取店铺详情
	const getShopDetails = () => {
		const { lonlat } = useAddressStore()
		let params = {
			shop_id: shopID.value,
			longitude: lonlat.longitude,
			latitude: lonlat.latitude
		}
		GetShopDetailsApi(params).then(res => {
			shopInfo.value = res
			shopInfo.value.bgc = res.head_imgs[0].url
			getCategoryList()
			getGoodsList()
		})
	}
	// 获取分类
	const getCategoryList = () => {
		let params = {
			shop_id: shopID.value,
			goods_type: 1
		}
		GetShopCategoryApi(params).then(res => {
			categoryList.value.push(...res.data)
		})
	}
	// 点击分类
	const tapCategory = (id) => {
		categoryId.value = id
		goodsList.value = []
		getGoodsList()
	}
	// 获取商品
	const getGoodsList = () => {
		const { lonlat } = useAddressStore()
		let params = {
			page: page.value,
			page_size: 20,
			longitude: lonlat.longitude,
			latitude: lonlat.latitude,
			filters: {
				goods_type: 1,
				shop_id: shopID.value,
				category_id: categoryId.value,
				active: '1',
				status: 'checked',
				search: searchVal.value
			}
		}
		GetShopGoodsListApi(params).then(res => {
			res.data.forEach(item => {
				item.num = 0
			})
			goodsList.value.push(...res.data)
			total.value = res.total
		})
	}
	// 滑动到底
	const scrolltolower = () => {
		if (total.value<=page.value*20) return
		page.value = page.value + 1
	}
	onLoad((e) => {
		const { userInfo } = useUserStore()
		shopID.value = userInfo.shop_id
		getShopDetails()
	})
</script>

<style lang="scss" scoped>
  .my-shop {
    width: 100%;
    margin-bottom: -100px;
    .content {
      width: 100%;
      // transform: translateY(-120px);
      margin-top: -120px;
      box-sizing: border-box;
      .switch-bar {
        display: flex;
        height: 40px;
        margin-top: 10px;
        background-color: #FFFFFF;
        border-bottom: 1px solid #E6E6E6;
        border-radius: 10px 10px 0px 0px;
        box-sizing: border-box;
        position: sticky;
        left: 0;
        z-index: 999;
        .switch-item {
          flex: 1;
          font-size: 14px;
          color: #555555;
          line-height: 40px;
          text-align: center;
          &.a-switch-item {
            position: relative;
            font-weight: 500;
            font-size: 16px;
            color: #FF3B1E;
            &::before {
              position: absolute;
              bottom: 0;
              left: 50%;
              transform: translateX(-50%);
              display: block;
              content: '';
              width: 26px;
              height: 4px;
              border-radius: 33px;
              background: linear-gradient(360deg, #FF8508 0%, #FF4847 100%);
            }
          }
        }
      }
      // 店铺产品
      .shop-product {
        display: flex;
        .tab-bar {
          width: 86px;
          .tab-item {
            height: 46px;
            color: #666666;
            font-size: 14px;
            font-weight: 400;
            line-height: 46px;
            text-align: center;
            &.a-tab-item {
              background: #FFFFFF;
              font-weight: 500;
              font-size: 14px;
              color: #333333;
            }
          }
        }
        .sc-view-right {
          flex: 1;
          background-color: #ffffff;
					.goods-list {
						.goods-item {
							display: flex;
							align-items: center;
							justify-content: space-between;
							padding: 10px;
							box-sizing: border-box;
							.goods-img {
								width: 80px;
								height: 80px;
                border-radius: 10px;
							}
							.goods-info {
								flex: 1;
								height: 80px;
								display: flex;
								margin-left: 10px;
								flex-direction: column;
								justify-content: space-between;
								.goods-name, .goods-desc {
									height: 16px;
									color: #3D3D3D;
									font-size: 14px;
									font-weight: 500;
									line-height: 16px;
									overflow: hidden;
									white-space: nowrap;
									text-overflow: ellipsis;
								}
								.goods-desc {
									color: #999999;
									font-size: 12px;
									font-weight: 400;
									line-height: 16px;
								}
								.goods-price {
									display: flex;
									align-items: center;
									.price {
										font-size: 10px;
										color: #FF3B1E;
										text {
										  font-size: 15px;
										  font-weight: 600;
										}
									}
									.price-old {
										color: #AAAAAA;
										font-size: 11px;
										font-weight: 300;
										line-height: 11px;
										margin-left: 10px;
										text-decoration: line-through;
									}
								}
								.goods-sale {
									height: 11px;
									color: #999999;
									font-size: 12px;
									font-weight: 400;
									line-height: 11px;
								}
							}
						}
					}
        }
      }
      // 商家信息
      .shop-details {
        width: 100%;
        padding: 10px 23px;
        box-sizing: border-box;
        background-color: #ffffff;
        .item {
          &:nth-of-type(1) {
            .label {
              margin-top: 0;
            }
          }
          .label {
            margin: 14px 0 6px;
            font-weight: 400;
            font-size: 14px;
            color: #333333;
            line-height: 20px;
          }
          .value {
            font-weight: 400;
            font-size: 14px;
            color: #999999;
            line-height: 20px;
            .v-img {
              width: 12px;
              height: 16px;
              margin-left: 8px;
            }
          }
        }
      }
      // 用户评价
    }
  }
</style>